<template>
  <div class="AuthenticationUpload">
    <div class="Upload_btn">
      <div class="Upload_img">
        <img v-show="img" src="../assets/images/Appicon1.png" alt="">
        <input type="file" class="file">
        <i v-show="icon" class="iconfont icon-zhengjian1"></i>
        <p>{{ prompt }}</p>
      </div>
    </div>
    <ul ref="from">
      <li><label>姓名</label> <input v-model="name" type="text" placeholder="输入姓名" value="name"></li>
      <li><label>证件号</label> <input v-model="number" type="number" placeholder="输入证件号" value="number"></li>
    </ul>
    <a @click="submit">提交</a>
  </div>
</template>
<script>
  export default{
    name:'AuthenticationUpload',
    data(){
      return{
        img:false,
        icon:true,
        prompt:'点击上传证件',
//        prompt:'点击重新上传'
        name:'',
        number:''
      }
    },
    mounted(){
      var from = this.$refs.from;
      from.scrollIntoView(true);
    },
    methods:{
        submit(){
            this.$router.push('/UploadResult')
        }
    }
  }
</script>
<style scoped>
  .AuthenticationUpload{position:relative;margin-bottom: 30%;}
  .file{position:absolute;top:50%;left:50%;width:49%;padding:40px 0;margin:-100px 0 0 -24%;opacity: 0;}
  .Upload_btn{height:200px;text-align: center;background: #fff;margin-bottom: .6rem;overflow: hidden;}
  .Upload_img{width:65%;margin:0 auto;height:70%;}
  .Upload_img img{width:100%;height:100%;margin:8% auto 4%;}
  .Upload_btn i{font-size:5rem;color:#ebebeb;width:49%;margin-top: 20%;display: inline-block;}
  .Upload_btn p{color:#999;margin-top: -3%;}
  .AuthenticationUpload li{background: #fff;padding:1.2rem 1rem;line-height:18px;margin-bottom: 1px;}
  .AuthenticationUpload li label{width:20%;display: inline-block;vertical-align: middle;}
  .AuthenticationUpload li input{width:78%;position:relative;right:-0rem;text-align: right;background: #fff;}
  .AuthenticationUpload a{text-align: center;padding:4% 0;color:#fff;font-size: 1.1rem;background: #ffa200;display: block;width:100%;position: fixed;bottom:0;}
</style>
